<template>
  <div class="home">
    <div style="padding-top: 15px; height: 100px;">
      <a-button :loading="exportLoading" type="primary" style="margin-left: 20px;" icon="download"
                @click="dataExport">导出
      </a-button>
      <a-button type="primary" style="margin-left: 10px;" icon="edit" @click="printContext">打印</a-button>
    </div>
    <div ref="Tables">
      <div v-if="printerTitle"
           style="font-size: 40px; font-weight: bold; text-align: center; padding-bottom: 30px; padding-top: 30px;">
        {{ this.$route.query.routerName }}
      </div>
      <div style="margin-bottom: 20px; font-size: 20px; margin-left: 10px;">
        <span>油站名称：{{ this.$route.query.CKMC }}</span>
        <span style="margin-left: 30px;">班次起：{{ formatDate(Number(this.$route.query.KSSJ)) }}</span>
        <span style="margin-left: 30px;">班次止：{{ formatDate(Number(this.$route.query.JSSJ)) }}</span>
        <span style="margin-left: 30px;">班结号：{{ this.$route.query.SHIFTNO }}</span>
      </div>
      <a-table
          :row-class-name="setDiffRow"
          :columns="columns"
          :data-source="tableData"
          :cell-style="{padding:'0px',cursor: 'pointer'}"
          bordered
          show-summary
          :pagination="false"
          :loading="loading"
          :rowKey="(record, index) => { return index }"
          size="small"
          :scroll="{ x: 500, y: tableHeight }"
      />
    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      loading: false,
      exportLoading: false,
      printerTitle: false,
      tableHeight: window.innerHeight - 300,
      columns: [
        {
          dataIndex: "ckmc",
          title: "站点",
          key: "ckmc",
          width: 100,
          align: "center",
          customRender: (text, row, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            const data = this.tableData;
            obj.attrs.rowSpan = this.getRowSpanCount(data || [], 'ckmc', index)
            return obj
          }
        },
        {
          dataIndex: "oil_name",
          title: "油品",
          key: "oil_name",
          width: 180,
          align: "center",
          customRender: (text, row, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            const data = this.tableData;
            obj.attrs.rowSpan = this.getRowSpanCount(data || [], 'oil_name', index)
            return obj
          }
        },
        {
          dataIndex: "oil_store_no",
          title: "罐号",
          key: "oil_store_no",
          width: 120,
          align: "center",
          customRender: (text, row, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            const data = this.tableData;
            obj.attrs.rowSpan = this.getRowSpanCount(data || [], 'oil_store_no', index)
            return obj
          }
        },
        {
          dataIndex: "terminal",
          title: "枪号",
          key: "terminal",
          width: 120,
          align: "center"
        },
        {
          title: "加油机付油泵码",
          children: [
            {
              dataIndex: "volbeg",
              title: "起泵码",
              key: "volbeg",
              width: 120,
              align: "center"
            },
            {
              dataIndex: "volend",
              title: "止泵码",
              key: "volend",
              width: 120,
              align: "center"
            }
          ]
        },
        {
          dataIndex: "voltotal",
          title: "加油机付出量(Vt)",
          key: "voltotal",
          width: 120,
          align: "center"
        },
        {
          dataIndex: "vcf20",
          title: "VCF20",
          key: "vcf20",
          width: 120,
          align: "center"
        },
        {
          dataIndex: "v20",
          title: "加油机付出量(V20)",
          key: "v20",
          width: 120,
          align: "center"
        },
        {
          title: "回灌量",
          align: "center",
          children: [
            {
              dataIndex: "huiguanvt",
              title: "(Vt)",
              key: "huiguanvt",
              width: 120,
              align: "center"
            }
          ]
        },
        {
          title: "销售升数",
          align: "center",
          children: [
            {
              dataIndex: "xiaoshoushengshuvt",
              title: "(Vt)",
              key: "xiaoshoushengshuvt",
              width: 120,
              align: "center"
            }
          ]
        },
        {
          title: "销售升数",
          align: "center",
          children: [
            {
              dataIndex: "xiaoshoushengshuv20",
              title: "(V20)",
              key: "xiaoshoushengshuv20",
              width: 120,
              align: "center"
            }
          ]
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - 300;
  },
  created() {
    // 动态切换标签页标题
    document.title = this.$route.query.routerName
    this.dataQuery();
  },
  methods: {
    // 查询
    dataQuery() {
      this.loading = true;
      axios
          .get("/baobiao/oilckjiaobanbengmajiaojie/list?kssj=" + this.formatDate(Number(this.$route.query.KSSJ)) + "&jssj=" + this.formatDate(Number(this.$route.query.JSSJ)) + "&ckmc=" + this.$route.query.CKMC + "&shiftno=" + this.$route.query.SHIFTNO)
          .then(resp => {
            this.tableData = resp.data.data;
            this.loading = false;
          })
    },
    // 时间戳转换字符串
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    // 小计、合计、总计添加行类名更改背景颜色
    setDiffRow(record) {
      if (record.oil_name == '站小计：' || record.terminal == '罐小计：') {
        return 'diffRow'
      } else {
        return '';
      }
    },
    /*
     * 合并列
     */
    getRowSpanCount(data, key, target) {
      if (!Array.isArray(data)) return 1;
      data = data.map(_ => _[key]); // 只取出筛选项
      let preValue = data[0];
      const res = [[preValue]]; // 放进二维数组里
      let index = 0; // 二维数组下标
      for (let i = 1; i < data.length; i++) {
        if (data[i] === preValue) { // 相同放进二维数组
          res[index].push(data[i]);
        } else { // 不相同二维数组下标+1
          index += 1;
          res[index] = [];
          res[index].push(data[i]);
          preValue = data[i];
        }
      }
      const arr = [];
      res.forEach((_) => {
        const len = _.length;
        for (let i = 0; i < len; i++) {
          arr.push(i === 0 ? len : 0);
        }
      });
      return arr[target];
    },
    // 导出
    dataExport() {
      this.exportLoading = true;
      axios
          .get("/baobiao/oilckjiaobanbengmajiaojie/daoExcel?kssj=" + this.formatDate(Number(this.$route.query.KSSJ)) + "&jssj=" + this.formatDate(Number(this.$route.query.JSSJ)) + "&ckmc=" + this.$route.query.CKMC + "&shiftno=" + this.$route.query.SHIFTNO, {responseType: 'blob'})
          .then(res => {
            if (res.data.size == 0) {
              this.$message.error('数据量太大(超过6万)或暂无待导出数据，请重新调整查询条件！');
              this.exportLoading = false;
            } else {
              this.downloadfile(res); // 导出excel
              this.exportLoading = false;
            }
          });
    },
    // 打印
    printContext() {
      this.printerTitle = true;
      this.tableHeight = 9999;
      this.$nextTick(() => {
        this.$print(this.$refs.Tables, {'noPrint': '.ant-pagination'});
        this.tableHeight = window.innerHeight - 300;
        this.printerTitle = false;
      });
    }
  }
};
</script>
<style scoped>
.el-table {
  overflow: visible !important;
}

/deep/ th {
  background-color: #1890FF !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
}

/deep/ .diffRow {
  background-color: #C9DAF8;
}
</style>
